<template>
   <div class="draggable-vue clearfix">
     <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card mb15" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16"><a class="ml5" target="_blank" href="https://github.com/SortableJS/Vue.Draggable">https://github.com/SortableJS/Vue.Draggable</a></span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            npm install --save vuedraggable<br>
            <br>
            import draggable from 'vuedraggable'<br>
            components:{<br>
              &nbsp;&nbsp;draggable<br>
            }
          </code>
        </div>
      </el-card>
      <draggable class="inline-block mr10" v-model="myArray" :options="options" @update="datadragEnd">
        <transition-group name="list-complete">
            <div class="test-one pointer" v-for="(element,index) in myArray" :key="index">
              <i class="item el-icon-rank"></i>
                {{element.name}}
            </div>
        </transition-group>
      </draggable>
      <draggable class="inline-block" v-model="myArray2" :options="options" @update="datadragEnd">
        <transition-group name="list-complete">
            <div class="test-one pointer" v-for="(element,index) in myArray2" :key="index">
              <i class="item el-icon-rank"></i>
                {{element.name}}
            </div>
        </transition-group>
      </draggable>
      <div class="clearfix mt20">
        <pre class="inline-block">
       {{JSON.stringify(myArray,null,2)}}
        </pre>
        <pre class="inline-block">
       {{JSON.stringify(myArray2,null,2)}}
        </pre>
      </div>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'DraggableVue',
  components: {
    draggable
  },
  data: function () {
    return {
      myArray: [
        {
          name: 'test1',
          order: 1
        },
        {
          name: 'test2',
          order: 2
        },
        {
          name: 'test3',
          order: 3
        },
        {
          name: 'test4',
          order: 4
        },
        {
          name: 'test5',
          order: 5
        },
        {
          name: 'test6',
          order: 6
        }
      ],
      myArray2: [
        {
          name: 'test11',
          order: 11
        },
        {
          name: 'test12',
          order: 12
        },
        {
          name: 'test13',
          order: 13
        },
        {
          name: 'test14',
          order: 14
        },
        {
          name: 'test15',
          order: 15
        },
        {
          name: 'test16',
          order: 16
        }
      ],
      editable: true,
      options: {
        animation: 300,
        group: 'description', // 是否可跨数组拖拽
        ghostClass: 'ghost',
        chosenClass: 'choose', // 被拖动选择器
        handle: '.item' // 可拖动选择器，若无，则全部可拖
      }
    }
  },
  methods: {
    datadragEnd: function (evt) {
      console.log('拖动前的索引：' + evt.oldIndex)
      console.log('拖动后的索引：' + evt.newIndex)
    }
  }
}
</script>
<style lang="scss">
.draggable-vue{
  margin: 0 auto;
  overflow: hidden;
  .main{
    padding: 10px;
    .test-one{
      height: 30px;
      width: 100px;
      line-height: 30px;
      background: #f9f9f9;
      color: #4a4a4a;
      border: 1px solid #ccc;
    }
  }
  .choose{
    opacity: 0.3;
    background: #ccc;
  }
}
</style>
